Vue Form Validation:Vue.js provides various built-in directives and methods to perform form validation. It allows you to validate form fields based on user input, including required fields, minimum and maximum length, pattern matching, and more. You can use conditional logic to display error messages, disable submit button until the form is valid, and trigger validation on form submission or field blur. Additionally, Vue.js also supports asynchronous validation using Promises or async/await. With its flexible and powerful form validation capabilities, Vue.js makes it easier to create robust and user-friendly web applications.
How can I implement form validation in Vue.js?
This is a Vue.js component that implements a form with basic validation. The form has three fields: name, email, and password.
The component includes methods to validate each of the input fields, which are called whenever the input fields are modified. The validation methods set error messages if the inputs are invalid.
The computed property formInvalid returns true if any of the fields are invalid, and is used to disable the submit button until all fields are valid. The component also includes a method to toggle the visibility of the password field.
When the form is submitted, the method submitForm is called, which can be implemented to perform the actual form submission logic.
Vue Form Validation Example
<div id="app">
<form @submit.prevent="submitForm">
<h3>Vue Form Validation</h3>
<label for="name">Name</label>
<input id="name" v-model="name" @input="validateName" :class="{ 'is-invalid': nameError }">
<div v-if="nameError" class="invalid-feedback">{{ nameError }}</div>
<label for="email">Email</label>
<input id="email" v-model="email" @input="validateEmail" :class="{ 'is-invalid': emailError }">
<div v-if="emailError" class="invalid-feedback">{{ emailError }}</div>
<label for="password">Password</label>
<div class="password-wrapper">
<input id="password" :type="passwordFieldType" v-model="password" @input="validatePassword"
:class="{ 'is-invalid': passwordError }">
<button type="button" class="show-hide-btn" @click="togglePasswordVisibility">{{ passwordVisible ? 'Hide' :
'Show' }}</button>
</div>
<div v-if="passwordError" class="invalid-feedback">{{ passwordError }}</div>
<button type="submit" :disabled="formInvalid">Submit</button>
</form>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
name: '',
email: '',
password: '',
nameError: '',
emailError: '',
passwordError: '',
passwordVisible: false,
};
},
methods: {
validateName() {
const nameRegex = /^[a-zA-Z\s]*$/;
if (this.name === '') {
this.nameError = 'Name is required';
} else if (!nameRegex.test(this.name)) {
this.nameError = 'Name can only contain letters and spaces';
} else {
this.nameError = '';
}
},
validateEmail() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (this.email === '') {
this.emailError = 'Email is required';
} else if (!emailRegex.test(this.email)) {
this.emailError = 'Email is invalid';
} else {
this.emailError = '';
}
},
validatePassword() {
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
if (this.password === '') {
this.passwordError = 'Password is required';
} else if (!passwordRegex.test(this.password)) {
this.passwordError = 'Password must contain at least 8 characters, one uppercase letter, one lowercase letter, and one number';
} else {
this.passwordError = '';
}
},
submitForm() {
// Implement form submission logic here
},
togglePasswordVisibility() {
this.passwordVisible = !this.passwordVisible;
},
},
computed: {
formInvalid() {
return this.nameError || this.emailError || this.passwordError;
},
passwordFieldType() {
return this.passwordVisible ? 'text' : 'password';
},
},
});
</script>
Output of Vue Form Validation
